<style scoped lang="less">
  .floor-list{
    padding-top: 30px;
    .floor-item{
      padding-top: 20px;
      overflow: hidden;
      position: relative;
      .poster-info{
        text-align: center;
        background: #f7fcff;
        padding: 30px 50px;
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 30px;
        .level{
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          margin-top: 10px;
          color: #fff;
          padding-left: 30px;
          background: url("../../../static/image/i_1.png") center center no-repeat;
        }
      }
      .detail{
        margin-left: 220px;
        padding: 30px 50px;
        min-height: 320px;
        .floor-main-content{
          font-size: 16px;
          padding: 20px 0;
        }
        .base-info{
          color: #888;
          font-size: 13px;
          letter-spacing: 1px;
        }
        .replyf{
          padding-top: 20px;
          font-size: 14px;
        }
        .replyf-area{
          padding: 20px 0;
        }
        .give-btnf{
          text-align: right;
          a{
            color: #fff;
            line-height: 40px;
            width: 160px;
            text-align: center;
            background: url("../../../static/image/ts_2.png");
            background-size: 100% 100%;
            letter-spacing: 1px;
            font-size: 16px;
          }
        }
      }
      .reply-list{
        position: relative;
        margin-top: 20px;
        background: rgba(200, 200, 200, 0.1);
        .reply-item{
          padding: 20px;
          .name{
            font-size: 16px;
            color: #666;
            font-weight: 600;
            letter-spacing: 3px;
          }
          .reply-content{
            padding: 15px 0;
            line-height: 24px;
            font-size: 15px;
          }
          .time{
            text-align: right;
            font-size: 14px;
            a{
              padding-left: 20px;
            }
          }
          .replyc{
            padding-top: 20px;
            text-align: right;
            font-size: 14px;
          }
          .replyc-area{
            padding: 20px 0;
          }
          .give-btnf{
            text-align: right;
            a{
              color: #fff;
              line-height: 40px;
              width: 160px;
              text-align: center;
              background: url("../../../static/image/ts_2.png");
              background-size: 100% 100%;
              letter-spacing: 1px;
              font-size: 16px;
            }
          }
        }
        .more-reply{
          font-size: 15px;
          padding: 20px 0;
          text-align: center;
          letter-spacing: 2px;
        }
      }
      .make-reply{
        color: #888;
        padding-left: 20px;
      }
      .active{
        color: #57a3f3;
      }
    }
  }
  .build{
    padding-top: 20px;
    background: #f7fcff;
    padding: 20px 50px;
    .title{
      color: rgb(39, 46, 129);
      font-size: 16px;
      font-weight: 600;
      .reply-icon{
        width: 20px;
        height: 20px;
        display: inline-block;
        background-size: 100% 100%;
        background-image: url("../../../static/image/bianji.png");
        transform: translateY(3px);
        margin-right: 10px;
      }
    }
    .published-content{
      padding: 20px 0;
    }
    .published{
      text-align: right;
      span{
        cursor: pointer;
        color: #fff;
        line-height: 40px;
        width: 100px;
        text-align: center;
        background: url("../../../static/image/ts_2.png");
        background-size: 100% 100%;
        letter-spacing: 1px;
        font-size: 16px;
      }
    }
  }
  .go-post-cover{
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    .cover-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 480px;
      background: url("../../../static/image/cover-bg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .logo-box{
        padding-top: 100px;
      }
      .prompt-text{
        color: #007aff;
        padding-top: 160px;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .btn{
        font-size: 18px;
        text-align: center;
        width: 120px;
        color: #fff;
        cursor: pointer;
        line-height: 36px;
        border-radius: 18px;
        background: #007aff;
        margin: 30px auto 0;
        box-shadow: none;
      }
    }
  }
</style>
<template>
   <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="floor-list">
            <div>
              <ul>
                <li v-for="(floor, index) in floorList" class="floor-item">
                  <div class="left poster-info">
                    <p style="position: relative">
                      <img style="width: 120px" :src="floor.us_headimg">
                      <span v-if="floor.role !== ''" style="background: #E6365C; position: absolute; top: 0;right: 0;font-size: 12px;padding:3px;color: #fff;">
                        {{ floor.role }}
                      </span>
                    </p>
                    <p style="padding-top: 20px; color: #272E81;font-size: 16px; font-weight: 600;letter-spacing: 3px">
                      {{ floor.us_nickname }}
                    </p>
                    <p class="level">
                      Lv.6
                    </p>
                  </div>
                  <div class="detail">
                    <div class="base-info">
                    <span class="right">
                      {{ floor.floor }}楼
                    </span>
                      <span class="time">
                      发布于：{{ floor.time }}
                    </span>
                    </div>
                    <div class="floor-main-content" v-html="floor.fo_content">
                    </div>
                    <div class="replyf">
                      <div>
                        <a class="right make-reply" @click="showReplyFat(index)" :class="replyFatIndex === index? 'active' : ''" href="javascript: void(0)">
                          回复本楼
                        </a>
                        <a @click="lookOver(index, floor.lookReply)" class="right make-reply" :class="floor.lookReply? 'active' : ''" href="javascript: void(0)">
                          {{ floor.lookReply? '收起回复':'查看回复' + '(' + floor.reply_count + ')' }}
                        </a>
                        <div class="clear"></div>
                      </div>
                      <div v-if="replyFatIndex === index">
                        <div class="replyf-area">
                          <Input type="textarea" :rows="5" v-model="replyFat" placeholder="请输入回复内容" />
                        </div>
                        <div class="give-btnf">
                          <a @click="subReplyFat(floor.fo_id, index)" href="javascript: void(0)">
                            发表回复
                          </a>
                        </div>
                      </div>
                    </div>
                    <div v-show="floor.lookReply" class="reply-list">
                      <div>
                        <ul>
                          <li v-for="(reply, chiIndex) in floor.reply_list" class="reply-item">
                            <div class="name">
                              {{ reply.us_nickname }}
                              <span v-if="reply.fr_nickname">
                                <span style="color: #aaa; font-weight: 100;padding-left: 10px;">
                                  回复
                                  <span style="font-weight: 600; color: #666">
                                    {{ reply.fr_nickname }}
                                  </span>
                                </span>
                              </span>:
                            </div>
                            <div class="reply-content">
                              {{ reply.fr_content }}
                            </div>
                            <div class="time">
                              {{ reply.time }}
                              <a class="make-reply" @click="showReplyChi(index, chiIndex)" :class="replyChiIndex[0] === index && replyChiIndex[1] === chiIndex? 'active' : ''" href="javascript: void(0)">
                                回复
                              </a>
                            </div>
                            <div v-if="replyChiIndex[0] === index && replyChiIndex[1] === chiIndex" class="replyc">
                              <div class="replyc-area">
                                <Input type="textarea" :rows="5" v-model="replyChi" placeholder="请输入回复内容" />
                              </div>
                              <div class="give-btnf">
                                <a @click="subReplyChi(index, chiIndex)" href="javascript: void(0)">
                                  发表回复
                                </a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div v-if="floor.reply_list.length !== 0" class="more-reply">
                        <span @click="moreRply(index)" style="cursor: pointer;display: inline-block">
                          {{ floor.noMore? '收起回复' : '查看更多回复' }}
                          <img v-if="floor.noMore" style="width:20px;transform: translateY(4px)" src="../../../static/image/prev-arrow.png">
                          <img v-else style="width:20px;transform: translateY(4px)" src="../../../static/image/next-arrow.png">
                        </span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div v-if="total !== 0" class="pager">
              <Page @on-change="changePage" :total="total" :page-size="5"></Page>
            </div>
          </div>
          <div class="build">
            <div class="title">
              <i class="reply-icon"></i>
              <span>
                发表回复
              </span>
            </div>
            <div class="published-content">
              <UE v-if="showUe" :defaultMsg=property :config=config1 ref="ue1" :id="ue1"></UE>
            </div>
            <div @click="flowPost" class="published">
              <span>
                发表
              </span>
            </div>
          </div>
        </div>
      </div>
     <div v-if="showCover" @mousewheel.prevent class="go-post-cover">
       <div class="cover-box">
         <div class="logo-box">
           <img src="../../../static/image/LOGO.png">
         </div>
         <div class="prompt-text">
           {{ coverText }}
         </div>
         <div @click="showCover = false" class="btn">
           OK
         </div>
       </div>
     </div>
   </div>
</template>

<script>
  import UE from '../Ueditor.vue'
  import Crumbs from '../Crumbs'
  export default {
    name: 'postDetail',
    components: {
      'Crumbs': Crumbs,
      UE
    },
    data () {
      return {
        showUe: true,
        stayTime: 0,
        int: null,
        myName: '',
        showCover: false,
        coverText: '',
        type: '',
        foId: -1,
        floorList: [],
        total: 0,
        page: 0,
        replyFat: '',
        replyFatIndex: -1,
        replyChi: '',
        replyChiIndex: [-1, -1],
        property: '',
        config1: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        ue1: 'ue1'
      }
    },
    methods: {
      // 获取楼层列表
      getFloorList: function () {
        let that = this
        let id = that.foId
        let page = that.page
        let token = ''
        if (this.$chaos.getAccessToken()) {
          token = this.$chaos.getAccessToken()
        }
        that.$chaos.ajax({
          url: '/Forum/getPostDetail',
          data: {
            fo_id: id,
            page: page,
            limit: 5,
            reply_limit: 5,
            access_token: token
          },
          callback: function (type, res) {
            if (type === 'success') {
              if (page === 0) {
                that.total = parseInt(res.result.count)
              }
              let list = res.result.list
              for (let i in list) {
                list[i].startCount = parseInt(list[i].reply_count)
                if (list[i].reply_count === 0) {
                  list[i].lookReply = false
                  continue
                }
                if (list[i].reply_count <= 5) {
                  list[i].noMore = true
                }
                list[i].lookReply = true
              }
              that.floorList = list
              that.showUe = true
            }
          }
        })
      },
      // 跳页
      changePage: function (e) {
        let page = e - 1
        if (this.page === page) {
          return false
        }
        this.page = page
        this.getFloorList()
        let $ = require('jquery')
        $('html,body').animate({
          scrollTop: 200
        }, 400)
      },
      // 是否查看回复
      lookOver: function (index, blo) {
        let that = this
        if (that.floorList[index].reply_list.length === 0) {
          return false
        }
        that.floorList[index].lookReply = !blo
        if (!blo) {
          that.replyChiIndex = [-1, -1]
        }
      },
      moreRply: function (index) {
        let that = this
        if (that.floorList[index].noMore) {
          that.floorList[index].lookReply = false
          that.replyChiIndex = [-1, -1]
          return false
        }
        let id = that.floorList[index].fo_id
        let token = ''
        if (this.$chaos.getAccessToken()) {
          token = this.$chaos.getAccessToken()
        }
        that.$chaos.ajax({
          url: '/Forum/getReplyPostAllList',
          data: {
            fo_id: id,
            access_token: token
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              that.floorList[index].reply_list = list
              that.floorList[index].noMore = true
            }
          }
        })
      },
      // 回复楼层内容
      showReplyFat: function (index) {
        let that = this
        if (!that.$chaos.getAccessToken()) {
          that.coverText = '先登录才能回复哦!'
          that.showCover = true
          return false
        }
        that.replyChiIndex = [-1, -1]
        if (that.replyFatIndex === index) {
          that.replyFatIndex = -1
          return false
        }
        that.replyFatIndex = index
      },
      subReplyFat: function (id, index) {
        let that = this
        let content = that.replyFat
        if (content === '') {
          return false
        }
        that.$chaos.ajax({
          url: '/Forum/replyPost',
          userinfo: true,
          data: {
            fo_id: id,
            content: content,
            nickname: ''
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.$vux.toast.show({
                text: '回复成功',
                width: '200px',
                position: 'middle',
                type: 'text'
              })
              let time = that.formatDate()
              that.replyFat = ''
              that.replyFatIndex = -1
              that.floorList[index].reply_list.unshift({
                us_nickname: that.myName,
                type: '本人',
                fr_content: content,
                time: time
              })
              that.floorList[index].reply_count = parseInt(that.floorList[index].reply_count) + 1
              if (that.floorList[index].reply_count === 1) {
                that.floorList[index].lookReply = true
              }
              if (that.floorList[index].startCount <= 5) {
                that.floorList[index].noMore = true
              }
            }
          }
        })
      },
      // 回复该楼层中的回复内容
      showReplyChi: function (index, chiIndex) {
        let that = this
        if (!that.$chaos.getAccessToken()) {
          that.coverText = '先登录才能回复哦!'
          that.showCover = true
          return false
        }
        if (that.floorList[index].reply_list[chiIndex].type === '本人') {
          return false
        }
        that.replyFatIndex = -1
        if (that.replyChiIndex[0] === index && that.replyChiIndex[1] === chiIndex) {
          that.replyChiIndex = [-1, -1]
          return false
        }
        that.replyChiIndex = [index, chiIndex]
      },
      subReplyChi: function (index, chiIndex) {
        let that = this
        let foId = that.floorList[index].fo_id
        let frId = that.floorList[index].reply_list[chiIndex].fr_id
        let nickname = that.floorList[index].reply_list[chiIndex].us_nickname
        let content = that.replyChi
        if (content === '') {
          return false
        }
        that.$chaos.ajax({
          url: '/Forum/replyPost',
          userinfo: true,
          data: {
            fo_id: foId,
            fr_id: frId,
            nickname: nickname,
            content: content
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.$vux.toast.show({
                text: '回复成功',
                width: '200px',
                position: 'middle',
                type: 'text'
              })
              let time = that.formatDate()
              that.replyChi = ''
              that.replyChiIndex = [-1, -1]
              that.floorList[index].reply_list.splice(chiIndex, 0, {
                us_nickname: that.myName,
                type: '本人',
                fr_content: content,
                time: time,
                fr_nickname: nickname
              })
              that.floorList[index].reply_count = parseInt(that.floorList[index].reply_count) + 1
              if (that.floorList[index].startCount <= 5) {
                that.floorList[index].noMore = true
              }
            }
          }
        })
      },
      setCrumbs: function () {
        let that = this
        let title = decodeURI(that.$chaos.getQueryString('title'))
        let type = that.type
        let link = ''
        let crumbs = []
        if (type === '我的帖子') {
          link = '/Personal/PersonalPost'
          crumbs = [{
            title: '个人中心',
            link: '/Personal/PersonalInfo'
          }, {
            title: type,
            link: link
          }, {
            title: title,
            link: ''
          }]
        } else {
          if (type === '主题论坛') {
            link = '/Forums/Theme'
          }
          if (type === '品牌论坛') {
            link = '/Forums/Brand'
          }
          if (type === '地区论坛') {
            link = '/Forums/Area'
          }
          if (type === '车系论坛') {
            link = '/Forums/CarsClub'
          }
          crumbs = [{
            title: type,
            link: link
          }, {
            title: title,
            link: ''
          }]
        }
        that.$store.commit('crumbs', crumbs)
      },
      // 跟帖
      flowPost: function () {
        let that = this
        if (!that.$chaos.getAccessToken()) {
          that.coverText = '先登录才能跟帖哦!'
          that.showCover = true
          return false
        }
        let content = this.$refs.ue1.getUEContent()
        if (content === '') {
          that.$vux.toast.show({
            text: '请输入内容',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          url: '/Forum/releasePostTo',
          userinfo: true,
          data: {
            content: content,
            fo_id: that.foId
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.$vux.toast.show({
                text: '发布成功',
                width: '200px',
                position: 'middle',
                type: 'text'
              })
              that.showUe = false
              that.total += 1
              that.getFloorList()
            }
          }
        })
      },
      getUserinfo: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getUserData',
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              that.myName = res.result.list.nickname
            }
          }
        })
      },
      // 格式化现在的时间
      formatDate: function () {
        let time = new Date()
        let year = time.getFullYear()
        let month = this.addZone(time.getMonth() + 1)
        let day = this.addZone(time.getDate())
        let hours = this.addZone(time.getHours())
        let minute = this.addZone(time.getMinutes())
        let second = this.addZone(time.getSeconds())
        time = year + '-' + month + '-' + day + ' ' + hours + ':' + minute + ':' + second
        return time
      },
      // 小于10加0
      addZone: function (num) {
        if (num < 10) {
          num = '0' + num
        }
        return num
      },
      verify: function () {
        let that = this
        that.type = decodeURI(that.$chaos.getQueryString('type'))
        that.foId = decodeURI(that.$chaos.getQueryString('foId'))
      }
    },
    created () {
      let that = this
      // console.log('创建:' + this.stayTime)
      // that.int = setInterval(function () {
      //   that.stayTime += 1
      // }, 1000)
      this.verify()
      let token = that.$chaos.getAccessToken()
      if (token) {
        that.getUserinfo()
      }
      that.setCrumbs()
      that.getFloorList()
      that.formatDate()
    },
    beforeDestroy () {
      // console.log('销毁:' + this.stayTime)
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>

<style>
  .pager{
    text-align: center;
    padding:20px 0;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
</style>
